<template>
<div class="article-container">

<!-- 导航栏 -->
<van-nav-bar
class="page-nav-bar"
left-arrow
title="博学谷头条"
></van-nav-bar>

<div class="main-wrap">

    <!-- 加载中 -->
<div class="loading-wrap" v-if="state.loading">
    <van-loading color="#3296fa" vertical>加载中</van-loading>
</div>

<!-- 文章详情 -->
<div class="article-detail" v-else-if="state.article.title">
<h1 class="article-title">{{state.article.title}}</h1>

<!-- 用户信息 -->
<van-cell class="user-info" center :border="false">
 <template #title class="user-name">{{ state.article.aut_name }}</template>
<template #label class="publish-date">{{ dayjs().to(dayjs(state.article.pubdate)) }}</template>
   
<van-image
class="avatar"
round
width="50px"
  height="50px"
fit="cover"
:src="`http://localhost:3005`+state.article.photo"
></van-image>

<van-button class="follow-btn"
color="#3296fa"
round
size="small"
icon="plus"
>关注 </van-button>

</van-cell>


    <!-- 文章内容 -->
<div class="article-content" v-html="state.article.content" ref="articleContent"></div>
<div>
    <van-image v-for="img in state.article.images" width="100%" fit="cover" height="200px" :src="`http://localhost:3005`+img"></van-image>
</div>
<van-divider>正文结束</van-divider>

</div>



<!-- 加载失败404 -->
<div class="error-warp" v-else-if="state.errStatus==404">
    <van-icon name="failure">
        <p class="text">该资源不存在或已被删除!</p>
    </van-icon>
</div>
    
    <!-- 加载失败 -->
<div class="error-warp" v-else>
    <van-icon name="failure">
        <p class="text">内容加载失败</p>
        <van-button class="retry-btn" @click="loadArticel(articleId)">点击重试</van-button>
    </van-icon>
</div>

</div>


</div>

</template>

<script setup>
import {onMounted,reactive,ref,nextTick} from "vue"
import {getArticleById} from "../../api/article"
import dayjs from "../../utils/day"
import {ImagePreview} from 'vant'
const props=defineProps({
    articleId:{
        type:String
    }
})
const articleContent=ref()
const state=reactive({
    article:{
        title:"",
        aut_name:"",
        pubdate:"",
        content:"",
        photo:""
    },
    loading:true,
    errStatus:0
})
async function loadArticel(id){
    try {
  const {data}=await  getArticleById(props.articleId?props.articleId:id)
   state.article=data 
   
     
   nextTick(()=>{
        perviewImage()
     });

// setTimeout(()=>{
//     perviewImage()
// },0)


   state.loading=false
    } catch (error) { 
    if(error.response && error.response.status==404){
        state.errStatus=404
    }
    } 
state.loading=false

}
//图片预览
 function perviewImage(){
 
const imgs=articleContent.value.querySelectorAll("img")
const images=[]
imgs.forEach((img,index)=>{
    images.push(img.src)
    img.onclick=()=>{
        ImagePreview({
            images,startPosition:index
        })
    }
})
 }
onMounted(() => {
    loadArticel()
})
</script>



<style>
.user-info .van-cell__value{
    display: flex;
    justify-content: center;
    align-items: center;

}.user-info .van-button{
    width: 70px;
    margin-left: 30px;
    
}
</style>